import React, { useEffect, useState } from "react";
import { SearchBar } from "antd-mobile";
import { IndexBar, List } from "antd-mobile";
import { Space, Button } from "antd-mobile";
import axios from "../../utils/request";

import { useDispatch } from "react-redux";
// 仓库
import { setstart, setend } from "../../store/CityList";
import { useNavigate } from "react-router-dom";
function City() {
  const [data, setData] = useState([]);
  const dispatch = useDispatch();
  const navigate = useNavigate();

  // 搜搜
  // const [value, setValue] = useState('')
  // const [visible, setVisible] = useState(false)

  // 数据
  const getdata = async () => {
    const res = await axios.get("city");
    console.log(res);
    setData(res.data.data);
  };

  useEffect(() => {
    getdata();
  }, []);

  // 点击跳转首页 存仓库
  const golist = (name) => {
    // console.log(name)
    const left = localStorage.getItem("left");
    // console.log(left)
    if (left === "left") {
      dispatch(setstart(name));
      navigate(-1);
    } else {
      dispatch(setend(name));
      navigate(-1);
    }
  };

  // 判断真假
  const [zhen, setZhen] = useState(false);

  // 存搜索到的数据
  const [cityslist,setCityslist] = useState([])
  const onSearch = async(value) => {
    // console.log(value);
    setZhen(true);
    const res = await axios.get('/city/search',{params:{wd:value}})
    console.log(res)
    setCityslist(res.data.data)
  };

  return (
    <div>
      <SearchBar placeholder="请输入内容" onSearch={onSearch} onClear={()=>{setZhen(false)}} />
      {zhen ? (
        <div>
          <Space direction="vertical">
            {
              cityslist.map((v,i)=>{
                return <Button key={i}>{v.name}</Button>
              })
            }
            
          </Space>
        </div>
      ) : (
        <div>
          <div>
            <h4>历史记录:</h4>
            <Space wrap>
              <Button>按钮1</Button>
            </Space>
          </div>
          <h4>热门城市:</h4>
          <div>
            <Space wrap>
              {data.hotCities?.map((v, i) => {
                return (
                  <Button
                    key={i}
                    onClick={() => {
                      golist(v.name);
                    }}
                    style={{ marginLeft: "8px" }}
                  >
                    {v.name}
                  </Button>
                );
              })}
            </Space>
          </div>
          {/* 列表城市 */}
          <div style={{ height: window.innerHeight }}>
            <IndexBar>
              {data.cityList?.map((group) => {
                const { title, citys } = group;
                return (
                  <IndexBar.Panel
                    index={title}
                    title={`${title}`}
                    key={`标题${title}`}
                  >
                    <List>
                      {citys.map((item, index) => (
                        <List.Item
                          key={index}
                          onClick={() => {
                            golist(item.name);
                          }}
                        >
                          {item.name}
                        </List.Item>
                      ))}
                    </List>
                  </IndexBar.Panel>
                );
              })}
            </IndexBar>
          </div>
        </div>
      )}
    </div>
  );
}

export default City;
